<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="shortcut icon" href="./img/logo.jpg">
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>

<body>
    <!--导航栏-->
    <div class="nav">
        <!--左侧logo-->
        <img src="./img/logo.jpg" alt="">
        <!--左侧标题-->
        <span class="title">博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <!--右侧连接栏-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">创作</a>
        <a href="javascript:void(0);" onclick="logout()">注销</a>
    </div>

    <script>
        function logout() {
            $.ajax({
                url: 'user/logout',//请求地址
                type: "GET",//请求方法
                data: $('#form').serialize(),  //表单数据
                datatype: "json",//数据类型为json，你自己看你后端要接收什么类型的数据
                success: function (result) {
                    // 根据你返回的数据自己改
                    if (result.code == 200) {
                        location.assign('login.html');  //跳转地址
                    } else {
                        alert(result.data);
                    }
                }
            });
        }
    </script>

    <!--版心-->
    <div class="container">
        <!--左侧个人信息-->
        <div class="container-left">
            <!--个人信息卡片-->
            <div class="card">
                <!--头像-->
                <img src="./img/头像.jpg" alt="">
                <!--用户名-->
                <h3></h3>
                <div class="counter">
                    <span>文章</span>
                </div>
                <div class="counter">
                    <!--文章数-->
                    <span class="count"></span>
                </div>
            </div>
        </div>

        <!--右侧内容详情-->
        <div class="container-right">
            <!-- <div class="blog">
                <div class="title">博客标题</div>
                <div class="date">发布日期</div>
                <div class="desc">
                    博客正文
                </div>
                <a href="blog_content.html?blogId=1" class="detail">查看全文 &gt;&gt;</a>
            </div> -->
        </div>
    </div>

    <!--基于ajax的方式来从服务器获取数据-->
    <script src="js/jquery.min.js"></script>
    <script>
        //1.通过ajax来给服务器发送获取博客列表的请求
        $.ajax({
            url: 'blog/selectAll',
            method: 'GET',
            success: function (data, status) {
                // data就表示响应的body(json数组),status就表示响应的状态码描述
                // 根据获取到的body的内容, 来构造HTML片段
                buildBlogs(data.data);
            },
            error: function (data, status) {
                alert("您当前尚未登录");
                location.assign('login.html');
            }
        })
        //2.根据响应中的body数据,构造HTML内容
        function buildBlogs(blogs) {
            let rightDiv = document.querySelector('.container .container-right');
            //遍历这个blogs,然后根据每个blog,构造出一个HTML片段加入到页面
            for (let blog of blogs) {
                //创建div.blog
                let blogDiv = document.createElement('div');
                blogDiv.className = 'blog';
                //创建div.title
                let titleDiv = document.createElement('div');
                titleDiv.className = 'title';
                titleDiv.innerHTML = blog.title;
                blogDiv.appendChild(titleDiv);
                //创建div.date
                let dateDiv = document.createElement('div');
                dateDiv.className = 'date';
                //此处postTime是一个毫秒时间戳,需要格式化时间
                dateDiv.innerHTML = formatDate(blog.postTime);
                blogDiv.appendChild(dateDiv);
                //创建div.desc
                let descDiv = document.createElement('div');
                descDiv.className = 'desc';
                descDiv.innerHTML = blog.content;
                blogDiv.appendChild(descDiv);
                //创建a.detail
                let detailA = document.createElement('a');
                detailA.className = 'detail';
                detailA.innerHTML = '查看全文 &gt; &gt;';
                detailA.href = 'blog_content.html?blogId=' + blog.blogId;
                blogDiv.appendChild(detailA);
                //将blogDiv加到rightDiv里
                rightDiv.appendChild(blogDiv);
            }
        }
        //3.格式化时间
        function formatDate(timeStampMS) {
            var date = new Date(timeStampMS);
            //通过data里的方法，获取时间的年月日等信息
            var year = date.getFullYear(),
                //月份是从0开始的
                month = date.getMonth() + 1,
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
                (month < 10 ? '0' + month : month) + '-' +
                (day < 10 ? '0' + day : day) + ' ' +
                (hour < 10 ? '0' + hour : hour) + ':' +
                (min < 10 ? '0' + min : min) + ':' +
                (sec < 10 ? '0' + sec : sec);
            return newTime;
        }

        //1.通过ajax来给服务器发送获取当前用户的登录状态的请求
        $.ajax({
            url: 'user/getUser',
            method: 'GET',
            success: function (data, status) {
                if (data.code == 200) {
                    setUser(data.data);
                } else if (data.code == -2) {
                    location.assign('login.html');
                }
            }
        });
        //2.根据响应中的body数据,构造HTML内容
        function setUser(user) {
            //根据服务器返回的用户信息,修改页面的显示内容. 
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;
        }

        //1.通过ajax来给服务器发送获取当前文章数的请求
        $.ajax({
            url: 'blog/count',
            method: 'GET',
            success: function (data, status) {
                setCount(data.data);
            }
        });
        //2.根据响应中的body数据,构造HTML内容
        function setCount(count) {
            //根据服务器返回的用户信息,修改页面的显示内容. 
            let span = document.querySelector('.card .counter .count');
            span.innerHTML = count;
        }
    </script>
</body>

</html>